﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridPanelExample.aspx.cs"
		Inherits="CooliteExamples.Web.Pages.Control.GridPanelExample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
		<title></title>
</head>
<body>
		<ext:ScriptManager runat="server" />

		<script language="javascript" type="text/javascript">
				var gpBooks_AuthorDayRender = function(value) {
						var isFirst = true;
						var returnString = "";

						Ext.each(value, function(a) {
								if (!isFirst)
										returnString += "<br />";

								returnString += a.AuthorName;
								isFirst = false;
						});

						return returnString;
				}

				var gpBooks_BlankRender = function(value) {
						return "";
				}

				var cmbCategoryFilter_Select = function() {
						BookStore.filterBy(getFilter());
				}

				var getFilter = function() {
						var f = {
								filter: function(record) {
										return filterNumber(cmbCategoryFilter.getValue(), 'CategoryId', record);
								}
						};

						return function(record) {
								if (!f.filter(record)) {
										return false;
								}
								return true;
						};
				}

				var filterNumber = function(value, dataIndex, record) {
						var val = record.get(dataIndex);

						if (!Ext.isEmpty(value, false) && val != value) {
								return false;
						}
						return true;
				}

				var btnClearFilter_Click = function() {
						cmbCategoryFilter.reset();
						BookStore.clearFilter();
				}

				var btnExportExcel_Click = function() {
						gpBooks.submitData(false);
				}
		</script>

		<ext:Store ID="BookStore" runat="server" AutoLoad="true" AutoDataBind="false" OnSubmitData="BookStore_Submit">
				<Reader>
						<ext:JsonReader Root="data">
								<Fields>
										<ext:RecordField Name="Title" />
										<ext:RecordField Name="CategoryId" />
										<ext:RecordField Name="CategoryName" />
										<ext:RecordField Name="ISBN" />
										<ext:RecordField Name="Authors" />
								</Fields>
						</ext:JsonReader>
				</Reader>
				<AjaxEventConfig IsUpload="true" />
		</ext:Store>
		<ext:Store ID="CategoryStore" runat="server" AutoLoad="true" AutoDataBind="false">
				<Reader>
						<ext:JsonReader Root="data">
								<Fields>
										<ext:RecordField Name="CategoryId" />
										<ext:RecordField Name="Name" />
								</Fields>
						</ext:JsonReader>
				</Reader>
		</ext:Store>
		<form id="form1" runat="server">
		<ext:GridPanel ID="gpBooks" runat="server" Height="500" DisableSelection="true" StoreID="BookStore"
				StripeRows="true" Title="View Books" ButtonAlign="Right">
				<ColumnModel runat="server">
						<Columns>
								<ext:Column Header="ISBN" DataIndex="ISBN" Width="60" />
								<ext:Column Header="Title" DataIndex="Title" Width="230" />
								<ext:Column Header="Category" DataIndex="CategoryName" Width="90" />
								<ext:Column Header="Author(s)" DataIndex="Authors" Width="90" Sortable="false">
										<Renderer Fn="gpBooks_AuthorDayRender" />
								</ext:Column>
								<ext:Column Width="40">
										<Renderer Fn="gpBooks_BlankRender" />
								</ext:Column>
						</Columns>
				</ColumnModel>
				<View>
						<ext:GridView runat="server" ForceFit="true">
								<HeaderRows>
										<ext:HeaderRow>
												<Columns>
														<ext:HeaderColumn Cls="x-small-editor" />
														<ext:HeaderColumn Cls="x-small-editor" />
														<ext:HeaderColumn Cls="x-small-editor">
																<Component>
																		<ext:ComboBox ID="cmbCategoryFilter" runat="server" DisplayField="Name" Editable="false"
																				ForceSelection="true" Mode="Local" StoreID="CategoryStore" ValueField="CategoryId">
																				<Listeners>
																						<Select Fn="cmbCategoryFilter_Select" />
																				</Listeners>
																		</ext:ComboBox>
																</Component>
														</ext:HeaderColumn>
														<ext:HeaderColumn Cls="x-small-editor" />
														<ext:HeaderColumn AutoWidthElement="false">
																<Component>
																		<ext:Button ID="btnClearFilter" runat="server" Icon="Cancel">
																				<ToolTips>
																						<ext:ToolTip ID="ToolTip1" runat="server" Html="Clear filter" />
																				</ToolTips>
																				<Listeners>
																						<Click Fn="btnClearFilter_Click" />
																				</Listeners>
																		</ext:Button>
																</Component>
														</ext:HeaderColumn>
												</Columns>
										</ext:HeaderRow>
								</HeaderRows>
						</ext:GridView>
				</View>
				<Buttons>
						<ext:Button ID="btnExportExcel" runat="server" Icon="PageExcel" Text="Export to Excel">
								<Listeners>
										<Click Fn="btnExportExcel_Click" />
								</Listeners>
						</ext:Button>
				</Buttons>
		</ext:GridPanel>
		</form>
</body>
</html>
